<template>
  <div class="Pagination">
    <div></div>
     <a-pagination
      :current="page.pageIndex"
      :page-size="page.pageSize"
      :total="page.total"
      :show-total="total => `共 ${page.total} 条`"
      size='small'
      @change='change'
    />
  </div>
</template>

<script setup>
import { watch ,onMounted, ref} from 'vue'
const props = defineProps({
    page:{
        type:Object,
        default:{
            total:0,
            pageIndex:1,
            pageSize:10
        }
    }
})

const size = ref(0)
const emit = defineEmits(['pageChange'])
const change = (page, pageSize)=>{
  if(size.value ==  pageSize){
    emit('pageChange',page, pageSize)
  }else{
    emit('pageChange',1, pageSize)
    size.value = pageSize
  }
} 

onMounted(()=>{
  size.value = props.page.pageSize
})
</script>

<style lang="less" scoped>
.Pagination{
    padding-top:20px ;
    display: flex;
    justify-content: space-between;
}
</style> 